<template>
  <div>
    <div class="top">
      <div class="header">
        <a>
          <span>百杉进销存管理系统</span>
        </a>
      </div>
    </div>
    <a-tabs default-active-key="1" @change="callback" :centered="true"
      :tabBarStyle="{ borderBottom: 'unset',textAlign: 'center'}" :size="size">
      <!-- 登录界面 -->
      <a-tab-pane key="1" tab="账号密码登录">
        <div class="Login">
          <a-form-model ref="ruleForm" :model="ruleForm" :rules="rules">
            <a-form-model-item prop="username">
              <a-input v-model="ruleForm.username" placeholder="请输入邮箱/手机号">
                <a-icon slot="prefix" type="user" />
              </a-input>

            </a-form-model-item>
            <a-form-model-item prop="password">
              <a-input type="password" v-model="ruleForm.password" placeholder="请输入密码">
                <a-icon slot="prefix" type="lock" />
              </a-input>
            </a-form-model-item>
            <a-form-model-item prop="code" class="identify">
              <a-input v-model="ruleForm.captcha" placeholder="请输入验证码">
                <a-icon slot="prefix" type="smile" />
              </a-input>
              <img :src="imgcode" @click="getCaptcha">
            </a-form-model-item>

            <a-form-model-item>
              <a-checkbox @change="onChange">自动登录</a-checkbox>
              <a-button type="link" id="button-left" @click="resgister">注册账户</a-button>
              <a-button type="link" id="button-right" @click="passwords">忘记密码</a-button>
            </a-form-model-item>

            <a-form-model-item>
              <a-button block type="primary" @click="onSubmit"> 确定 </a-button>
            </a-form-model-item>
            <a-form-model-item>
              <span>其他登陆方式</span>
              <a-icon type="wechat" class="a-icon-left" />
              <a-icon type="dingding" class="a-icon-right" />
            </a-form-model-item>
          </a-form-model>
        </div>
      </a-tab-pane>


      <!-- 注册界面 -->
      <a-tab-pane key="2" tab="手机号登陆" force-render>
        <div class="Login">
          <a-form-model ref="ruleForm" :model="ruleForm" :rules="rules">
            <a-form-model-item prop="resname">
              <a-input v-model="ruleForm.resname" placeholder="请输入邮箱/手机号">
                <a-icon slot="prefix" type="mobile" />
              </a-input>
            </a-form-model-item>
            <!-- <a-form-model-item prop="resword">
              <a-input
                type="resword"
                v-model="ruleForm.resword"
                placeholder="请输入密码"
              >
              <a-icon slot="prefix" type="mail" />
                </a-input>
            </a-form-model-item> -->
          <a-form-model-item>
            <a-input-group size="large">
              <a-row :gutter="15">
                <a-col :span="15">
                  <a-input type="resword" v-model="ruleForm.resword" placeholder="请输入密码">
                    <a-icon slot="prefix" type="mail" />
                  </a-input>
                </a-col>
                <a-col :span="9">
                  <a-input default-value="获取验证码" />
                </a-col>
              </a-row>
            </a-input-group>
          </a-form-model-item>
            <a-form-model-item>
              <a-checkbox @change="onChange">自动登录</a-checkbox>
              <a-button type="link" id="button-left"  @click="resgister">注册账户</a-button>
              <a-button type="link" id="button-right" @click="passwords">忘记密码</a-button>
            </a-form-model-item>

            <a-form-model-item>
              <a-button block type="primary" @click="onSubmit"> 确定 </a-button>
            </a-form-model-item>
            <a-form-model-item>
              <span>其他登陆方式</span>
              <a-icon type="wechat" class="a-icon-left" />
              <a-icon type="dingding" class="a-icon-right" />
            </a-form-model-item>
          </a-form-model>
        </div>
      </a-tab-pane>

    </a-tabs>
  </div>

</template>
 
<script>

import { getCode, login } from "@/api/login";
export default {
  name: "LoginView",
  data() {
    let validateCode = (value, callback) => {
      if (value === "") {
        callback(new Error("验证码为空"));
        return false;
      } else if (value !== this.identifyCode) {
        callback(new Error("验证码不正确"));
        return false;
      } else {
        callback();
      }
    };
    return {
      time13: '',
      time10: '',
      imgcode: '',
      identifyCodes: "1234567890",
      identifyCode: "",
      ruleForm: {
        username: "admin",
        password: "123456",
        resname: "",
        resword: "",
        code: "",
      },
      rules: {
        name: { required: true, message: "请输入邮箱/手机号", trigger: "blur" },
        password: { required: true, message: "请输入密码", trigger: "blur" },
        code: [{ validator: validateCode, trigger: "blur" }],
      },
    };
  },
  created() {
    this.getCaptcha()
  },
  mounted() {
    // 初始
    this.identifyCode = "";
    this.makeCode(this.identifyCodes, 4);
  },
  methods: {
    // 确认
    async onSubmit() {
      const p = {
        captcha: this.ruleForm.captcha,
        checkKey: this.time13,
        password: this.ruleForm.password,
        remember_me: true,
        username: this.ruleForm.username
      }
      const res = await login(p)

      localStorage.setItem('token', res.result.token)
      location.href = '/home/shouye'

      // }

    },
    resgister(){
      this.$router.replace('/resgister')
    },
    passwords(){
      this.$router.replace('/password')
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    // 验证码相关
    //获取验证码编码
    async getCaptcha() {
      console.log("开始")
      this.time13 = Date.now()
      this.time10 = JSON.stringify(this.time13).substring(0, 10)
      const p = {
        _t: this.time10
      }

      await getCode(p, this.time13).then(res => {
        if (res.success) {
          console.log("成功")
          this.imgcode = res.result
        } else {
          this.$message.error(res.message)
        }
      }).catch(() => {
        console.log("失败")
      })
    },
    callback(key) {
      console.log(key);
    },

    randomNum(min, max) {
      return Math.floor(Math.random() * (max - min) + min);
    },
    // 点击刷新验证码
    refreshCode() {
      this.identifyCode = "";
      this.makeCode(this.identifyCodes, 4);
    },
    // 生成验证码
    makeCode(o, l) {
      for (let i = 0; i < l; i++) {
        this.identifyCode +=
          this.identifyCodes[this.randomNum(0, this.identifyCodes.length)];
      }
    },
    onChange(e) {
      console.log(`checked = ${e.target.checked}`);
    },
  },
};
</script>
 
<style lang="scss" scoped>
.Login {
  width: 100%;
  height: 100%;

  .title {
    font-size: 40px;
    font-weight: bold;
    padding: 60px 0 60px 40px;
  }

  .ant-form {
    width: 25%;
    border-radius: 5px;
    background: #fff;
    margin: auto;
    padding: 18px 40px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

    .ant-dropdown-trigger {
      float: right;
      margin-right: -20px;
    }

    h5 {
      font-size: 26px;
      text-align: center;
      margin-bottom: 25px;
    }
  }

  @media screen and (min-width: 769px) and (max-width: 1000px) {
    .title {
      font-size: 50px;
      text-align: center;
    }

    .ant-form {
      width: 60%;
    }
  }

  @media screen and (max-width: 769px) {
    .title {
      font-size: 50px;
      text-align: center;
    }

    .ant-form {
      width: 90%;
    }
  }
}
</style>
<style lang="scss">
// 验证码样式
.Login .identify .ant-form-item-children {
  display: flex;
  align-items: center;

  .ant-input {
    flex: 1;
    margin-right: 10px;
  }
}

.ant-tabs-ink-bar {
  width: 50% !important;
}

.el-tabs__header {
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}

.top {
  margin-top: 8%;
  text-align: center;
  margin-bottom: 2%;
}

.top .header {
  height: 10%;
  line-height: 2%;
}

.top .header span {
  font-size: 33px;
  color: rgba(0, 0, 0, .65);
  font-family: Chinese Quote, -apple-system, BlinkMacSystemFont, Segoe UI, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Helvetica Neue, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
  font-weight: 600;
  position: relative;
  top: 2px;
}

#button-left {
  width: 1%;
  height: 1%;
  margin-left: 20%;
  cursor: pointer;
}

#button-right {
  width: 1%;
  height: 1%;
  margin-left: 15%;
  cursor: pointer;
}

.a-icon-left {
  font-size: 200%;
  margin-left: 5%;
  cursor: pointer;
}

.a-icon-right {
  font-size: 200%;
  margin-left: 5%;
  cursor: pointer;
}
</style>
